<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 在子组件标签上自定义一个事件 监听该事件的触发 -->
        <child></child>
        <child2></child2>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        // bus里面会包含vue所有的属性和方法 包括$emit(触发一个事件的方法) $on(监听一个事件触发的方法)
        var bus = new Vue()
        Vue.prototype.$bus = bus
        new Vue({
            el: '#app',
            components: {
                child: {
                    template: `
                        <div>
                            这是个子组件1
                            <button @click="sendData">按钮</button>
                        </div>
                    `,
                    data() {
                        return {
                            childMsg: 'hello world'
                        }
                    },
                    methods: {
                        sendData() {
                            this.$bus.$emit('send-data', this.childMsg)
                        }
                    }
                },

                child2: {
                    template: `
                        <div>
                            这是个子组件2 {{childMsg}}
                            <button>按钮</button>
                        </div>
                    `,
                    data() {
                        return {
                            childMsg: ''
                        }
                    },

                    created() {
                        this.$bus.$on('send-data', (msg) => {
                            // console.log(msg)
                            this.childMsg = msg
                        })
                    },

                    methods: {
                        sendData() {
                        }
                    }
                }
            },
            data: {
                msg: ''
            },
        })
    </script>
</body>
</html>